<template>
  <view class="myGradient" :style="{ '--leftGradient': leftGradient, '--rightGradient': rightGradient }">
    <up-navbar
        :bgColor="`linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 300px), linear-gradient(90deg , ${leftGradient} 0%, ${rightGradient} 100%)`"
        :title="title"
        placeholder
        :leftIcon="isBack ? 'arrow-left' : ''"
        :leftIconColor="leftIconColor"
        :autoBack="isBack"
    ></up-navbar>
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import {defineProps, onMounted} from 'vue'

const props = defineProps({
  isBack: {
    type: Boolean,
    default: false
  },
  leftIconColor: {
    type: String,
    default: '#303133'
  },
  leftGradient: {
    type: String,
    default: '#fff'
  },
  rightGradient: {
    type: String,
    default: '#fff'
  },
  title: {
    type: String,
    default: '首页'
  }
})

// #ifdef H5
onMounted(() => {
  document.title = props.title
})
// #endif

</script>

<style scoped lang="scss">
@import "@/minx.scss";

.myGradient {
  @include my_gradient(var(--leftGradient), var(--rightGradient));
}
</style>